﻿@model MegaBitProject.Models.Pictionary

@{
    ViewBag.Title = "Pictionary";
}
<script src="~/Scripts/Game.js"></script>

<div id="main">
    @Html.ActionLink("Back to lobby", "Lobby", "Pictionary", null, new { @class = "lobbyBtnPic" })
    <div id="sketch">
        <div id="wordtodraw"></div>
        <canvas id="pictionaryCanvas" width="600" height="400" ></canvas>
    </div>
    <div id="picker">
        <ul id="brushColors">
            <li id="black"></li>
            <li id="brown"></li>
            <li id="red"></li>
            <li id="yellow"></li>
            <li id="orange"></li>
            <li id="green"></li>
            <li id="blue"></li>
        </ul>
        <ul id="brushSize">
            <li id="2"><img src="/Content/brush/small.png" alt="Small brush" /></li>
            <li id="5"><img src="/Content/brush/medium.png" alt="Medium brush" /></li>
            <li id="14"><img src="/Content/brush/large.png" alt="Large brush" /></li>
            <li id="28"><img src="/Content/brush/xlarge.png" alt="Extra large brush" /></li>
        </ul>
        <ul id="drawTools">
            <li id="eraser"><img src="/Content/brush/eraser.png" alt="Eraser" /></li>
        </ul>
    </div>
    <div id="gamemsgPic">
        <form id="gameguess" method="post" action="#">
            <h2>Post your answers here: </h2><input type="text" id="guess" name="guess" value="" />
        </form>
        <form id="gamechat" method="post" action="#">
            <h2>Chatroom for Pictionary</h2>
            <textarea readonly id="txtmsg"></textarea>
            <input autofocus type="text" id="message" name="message" value="" />
        </form>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        var groupID = '@Model.gameID.ID';
        var session = '@Model.session';
        var hub = $.connection.gameHubPictionary;
        var you = ('@User.Identity.Name').toLowerCase();
        var drawTurn = false;
        var word = '@Model.word';
        var drawingUser = ('@Model.userID.UserName').toLowerCase();

        var canvas = document.querySelector('#pictionaryCanvas');
        var c = canvas.getContext('2d');

        var sketch = document.querySelector('#sketch');
        var sketch_style = getComputedStyle(sketch);
        canvas.width = parseInt(sketch_style.getPropertyValue('width'));
        canvas.height = parseInt(sketch_style.getPropertyValue('height'));

        var mouse = { x: 0, y: 0 };
        var last_mouse = { x: 0, y: 0 };

        c.lineWidth = 4;
        c.lineJoin = 'round';
        c.lineCap = 'round';
        c.strokeStyle = 'black';

        if (you != ('@Model.userID.UserName').toLowerCase()) {
            $('#picker').hide();
        }
        else {
            $('#gameguess').hide();
            $('#wordtodraw').html("Draw: " + word.charAt(0).toUpperCase() + word.slice(1));
            drawTurn = true;
        }

        hub.client.winner = function (sessionId, userName, newWord) {
                if (userName != you) {
                    $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** " + userName + " WINS!");
                    drawTurn = false;
                    $('#picker').hide();
                    $('#wordtodraw').html("");
                    setTimeout(function () {
                        $('#gameguess').show();
                    }, 2000);
                }
                else
                {
                    $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** You Win!");
                    $('#gameguess').hide();

                    setTimeout(function () {
                        $('#wordtodraw').html("Draw: " + newWord.charAt(0).toUpperCase() + newWord.slice(1));
                        $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** Now it's your turn to draw!");
                        $('#picker').show();
                        c.strokeStyle = 'black';
                        c.lineWidth = 4;
                        drawTurn = true;
                    }, 2000);
                }
                setTimeout(function () {
                    c.clearRect(0, 0, canvas.width, canvas.height);
                }, 2000);
                session = sessionId + 1;
                $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
                word = newWord;
                drawingUser = userName;
        }

        $("#brushSize li").click(function () {
            var size = $(this).attr("id");
            c.lineWidth = size;
        });

        $("#eraser").click(function () {
            c.strokeStyle = "#ffffff";
        });

        $("#brushColors li").click(function () {
            var color = $(this).css("background-color");
            c.strokeStyle = color;
        });

        hub.client.handleDraw = function (sessionId, color, brush, lastX, lasteY, newX, newY) {
            c.strokeStyle = color;
            c.lineWidth = brush;
            c.beginPath();
            c.moveTo(lastX, lasteY);
            c.lineTo(newX, newY);
            c.closePath();
            c.stroke();
        }

        $('#txtmsg').append("[" + getTime() + "] " + "*** Welcome to Pictionary!");
        $('#txtmsg').append("\n[" + getTime() + "] " + "*** This is game #" + groupID + "");

        hub.client.newMessage = function (userName, message) {
            $('#txtmsg').append("\n" + "[" + getTime() + "] " + userName + ": " + message);
            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
        }

        hub.client.newGuess = function (userName, guess) {
            $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** " + userName + " guessed: " + guess);
            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
        }

        hub.client.userJoin = function (userName) {
            $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** " + userName + " has joined the game!");
            $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
        }

        $.connection.hub.start().done(function () {
            hub.server.join(groupID, you);
            
        $('#gamechat').submit(function () {
            var message = $("#message").val();
            if (message.length > 0) {
                hub.server.addMessage(groupID, you, message);
                $('#txtmsg').append("\n" + "[" + getTime() + "] " + you + ": " + $('#message').val());
                $('#message').val("");
                $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
            }
            return false;
        });

        $('#gameguess').submit(function () {
            var guess = $("#guess").val().toLowerCase();
            if (guess.length > 0) {
                hub.server.addGuess(groupID, session, you, guess, word, drawingUser);
                $('#txtmsg').append("\n" + "[" + getTime() + "] " + "*** You guessed: " + guess);
                $('#guess').val("");
                $('#txtmsg').scrollTop($('#txtmsg')[0].scrollHeight);
            }
            return false;
        });

        canvas.addEventListener('mousemove', function (e) {
            last_mouse.x = mouse.x;
            last_mouse.y = mouse.y;
            mouse.x = e.pageX - this.offsetLeft;
            mouse.y = e.pageY - this.offsetTop;
        }, false);

        canvas.addEventListener('mousedown', function (e) {
            canvas.addEventListener('mousemove', onPaint, false);
        }, false);

        canvas.addEventListener('mouseup', function () {
            canvas.removeEventListener('mousemove', onPaint, false);
        }, false);
                
        var onPaint = function () {
            if (drawTurn == true) {
                c.beginPath();
                c.moveTo(last_mouse.x, last_mouse.y);
                c.lineTo(mouse.x, mouse.y);
                c.closePath();
                c.stroke();

                $.connection.hub.start().done(function () {
                    hub.server.sendDraw(groupID, session, you, c.strokeStyle, c.lineWidth, last_mouse.x, last_mouse.y, mouse.x, mouse.y);
                });
            }};
        });
    }());
</script>